<template>
  <div id="CallAmount">
    <!-- 左侧树形菜单 -->
    <div class="tree">
      <!--树搜索区域-->
      <div class="tree-search">
        <el-input
          v-model="searchTreeValue"
          placeholder="请输入关键字搜索..."
          clearable
          size="mini">
        </el-input>
        <i class="iconfont icon-sousuo"></i>
      </div>
      <!--树列表-->
      <basic-tree style="height: 850px; overflow-y: auto;"
        ref="orgtree"
        :tree-data="callTreeList"
        :flag-tree="treeFlag"
        :loadChildrenData="loadChildrenData"
        :show="false"
        :draggable="false"
        @node-click="clickNodeChange"
        @filter-node-click="filterClickNode">
      </basic-tree>
    </div>
    <!--通话量主体内容-->
    <div class="call-data">
      <call-amount-search :levelList="levelList" @exportExcel="exportExcel" @search="searchName" @query="searchValue" bool="bool" :downLoading="downLoading" ref="search" @isSearch="isSearch"></call-amount-search>
      <table-features :count="totalSize" :tabIndex="switchIndex" @currentIndex="switchTable" :callTotal="callTotal" :classification="classification"></table-features>
      <basic-table :loading="loading" @enterInfo="entryDetails" :Pages="searchData.page" :size="searchData.size" :tableType="tableType" :header="header" :body="body" @sortChange="sortChange" :stateSearch="stateSearch"></basic-table>
      <pagination :paginationLoading="paginationLoading" :page="searchData.page" :total="totalSize" @pagination-change="handleCurrentChange"></pagination>
    </div>
    <!--表格内容详情侧滑-->
    <Drawer :closable="false" width="1100" v-model="displayHiding" :scrollable="true">
      <call-amount-info v-show="displayHiding" style="margin: 0 auto" :infoData="infoData" @JumpCallAmount="JumpCallAmount" @openSilde="JumpCallAmount" :displayHiding="displayHiding" :departmentName='departmentName' :callType="callType"></call-amount-info>
    </Drawer>
  </div>
</template>
<script>
/**       
 * @author 王磊
 * @information 通话量页面
 * @date 2019-1-12 15:32
 * @param {*} queryTime 查询时间
 */
// 获取调用域名
import request from '@/assets/js/axios.js'
import { createNamespacedHelpers } from "vuex"
const { mapState, mapGetters } = createNamespacedHelpers("CallAmount")
export default {
  data() {
    return {
      queryTime: null,
      searchData: {
        page: 1,
        size: 20,
        order: null, // 正序倒序
        orderName: null, // 排序字段
        userName: null, // 按名字查询
        departmentId: null, // 门店id
        levelId: null, // 职级
        callType: null, // 呼叫类型
        range: null, // 范围
        startTime: null, // 开始时间
        endTime: null, // 结束时间
        type: null // 部门类型
      },
      bool: true, //判断角色职级输入框是否为选中状态
      index: 0, // 当前选择的分类区组点人
      departmentId: 0, //树形控件部门id
      searchTreeValue: "", //树形控件input搜索内容
      timer: null, //定时器
      treeFlag: false, //默认正常显示的树还是搜索出来的树,默认为正常显示
      getOrgChildListData: [],
      nodeName: "千家公司",
      tableType: 'region', // 表格类型
      displayHiding: false, // 侧滑框显示或隐藏，默认隐藏
      infoData: null, // 详情信息表格内容
      switchIndex: 0,
      departmentName: '', // 部门名字 //供侧滑使用
      callType: '',  //选中的类型 供侧滑使用
      stateSearch: false //是否进行了搜索
    }
  },
  computed: {
    ...mapState(["header", "body", "callTotal", "levelList", "loading", "totalSize","address","downLoading", "paginationLoading"]),
    ...mapGetters(["callTreeList", "bluryList", "classification"])
  },
  /**
   * @author 王磊 
   * @information 树形结构数据
   * @date 2019-03-14
   */
  created () {
    // 获取树形控件数据
    this.$store.dispatch('CallAmount/getTreeList', this.departmentId)
    // 部门名称
    this.$store.state.CallAmount.departmentName = this.nodeName
    
  },
  /**
   * @author 王磊 
   * @information 获取通话量页面初始数据
   * @date 2019-02-12
   */
  mounted() {
    this.initData()
  },
  methods: {
    /**
     * @author 赵美阳
     * @information 已经点击搜索，更改表格无数据时提示的内容
     * @date 2019-04-02
     */
    isSearch(val){
      this.stateSearch = true
    },
    /**
     * @author 王磊 
     * @information 初始化通话量页面数据
     * @date 2019-02-12
     */
    initData () {
      this.queryTime = new Date().toLocaleDateString().replace(/\//g, '-')
      this.$set(this.searchData, 'startTime', `${this.queryTime} 00:00:00`)
      this.$set(this.searchData, 'endTime', `${this.queryTime} 23:59:00`)
      setTimeout(() => {
        this.$set(this.searchData, 'type', '0006')
        this.$set(this.searchData, 'departmentId', this.callTreeList[0].id)
        // 获取职级字典
        this.$store.dispatch('CallAmount/getLevelList')
        this.areaData(this.searchData, null)
      }, 400)
    },
    /**
     * @author 陈涛
     * @information 隐藏详情页
     * @date 2019-02-01
     */
    JumpCallAmount () {
      this.displayHiding = false
    },
    /**
     * @author 王磊
     * @information 升序降序
     * @date 2019-1-14 11:14
     */
    sortChange(val) {
      this.$set(this.searchData, 'orderName', val.prop)
      this.$set(this.searchData, 'order', val.order)
      let method = {
        region: "CallAmount/getCallAmountBody",
        people: "CallAmount/getCallPeopleBody"
      }
      this.$store.dispatch(method[this.tableType], this.searchData)
    },
    /**
     * @author 王磊
     * @information 分页
     * @date 2019-1-14 11:14
     */
    handleCurrentChange(page, size) {
      this.$set(this.searchData, 'page', page)
      this.$set(this.searchData, 'size', size)
      let method = {
        region: "CallAmount/callAmountPageModel",
        people: "CallAmount/callPeoplePageModel"
      }
      this.$store.dispatch(method[this.tableType], this.searchData)
    },
    /**
     * @author 陈涛
     * @information 根据用户点击区店组人切换对应表格数据
     * @date 2019-1-14 15:38
     */
    switchTable(data) {
      // 设置当前需要显示数据的内容
      this.switchIndex = this.index = data.index
      // 每次切换显示第一页
      this.$set(this.searchData, 'page', 1)
      // 判断角色职级输入框是否为选中状态
      this.bool = true
      // 根据索引选择需要显示区店组人信息
      this.$set(this.searchData, 'type', data.statusId)
      // 获取人的表格数据
      if (data.name === '人') {
        this.humanData(this.searchData, data.name)
      } else {
        this.$set(this.searchData, 'userName', null)
        // 获取除了人的表格数据
        this.areaData(this.searchData, null)
      }
    },
    /**
     * @author 陈涛
     * @information 进行条件查询具体信息
     * @date 2019-01-16
     * @param {*} searchName 查询姓名信息
     */
    searchName(value) {
      if (this.classification && this.classification.length === 0) {
        return
      }
      this.$set(this.searchData, 'userName', value.name)
      if (value.name) {
        this.switchIndex = this.classification.length - 1
      }
      if (value.is) {
        this.humanData(this.searchData, '人')
      }
    },
    /**
     * @author 陈涛
     * @information 进行条件查询具体信息
     * @date 2019-01-16
     * @param {*} searchValue 查询条件信息
     */
    searchValue(value) {
      // 查询条件职级赋值
      this.$set(this.searchData, 'levelId', value.levelId)
      // 查询条件呼叫类型赋值
      this.$set(this.searchData, 'callType', value.callType)
      // 查询条件查询范围赋值
      this.$set(this.searchData, 'range', value.range)
      // 判断时间查询条件是否为空
      let flag = value.date === null
      let startTime = flag ? this.queryTime : value.date[0]
      let endTime = flag ? this.queryTime : value.date[1]
      this.searchData.startTime = `${startTime} 00:00:00`
      this.searchData.endTime = `${endTime} 23:59:00`
      // 获取人的数据表格
      if (this.classification && this.classification.length > 0 && this.classification[this.switchIndex].code === null) {
        this.humanData(this.searchData, '人')
        return
      }
      // 调用获取表格数据请求
      this.areaData(this.searchData, null)
    },
    /**
     * @author 陈涛
     * @information 获取区表格信息
     * @date 2019-01-17
     */
    areaData(searchData, type) {
      this.tableType = "region"
      // 获取表格数据头部
      this.$store.dispatch("CallAmount/getCallAmountHeader")
      // 获取区域表格数据
      this.$store.dispatch("CallAmount/getCallAmountBody", searchData)
      // 获取区域合计数据条数
      this.$store.dispatch("CallAmount/tableTotal", searchData)
      this.$store.dispatch("CallAmount/totalItem", { searchData, type})
    },
    /**
     * @author 陈涛
     * @information 获取区表格信息获取人
     * @date 2019-01-17
     */
    humanData(searchData, type) {
      // 判断角色职级输入框是否为选中状态
      this.bool = false
      this.tableType = "people"
      // 获取人的表格头部
      this.$store.dispatch("CallAmount/getCallPeopleHeader")
      // 获取人的表格数据
      this.$store.dispatch("CallAmount/getCallPeopleBody", searchData)
      // 获取人的合计数据条数
      this.$store.dispatch("CallAmount/tableTotal", searchData)
      this.$store.dispatch("CallAmount/totalItem", { searchData, type })
    },
    /**
     * @author 王磊
     * @information 导出excel
     * @date 2019-2-15 9:57
     */
    exportExcel() {
      let excel = JSON.parse(JSON.stringify(this.searchData))
      delete excel.page
      delete excel.size
      let isType = this.classification && this.classification.length > 0 && this.classification[this.switchIndex].code === null
      this.$store.dispatch("CallAmount/exportExcel", {excel, statusId: isType ? null:'1'})
    },
    /**
     * @author 王磊
     * @information 点击节点时发生的事件
     * @date 2019-1-19 14:43
     */
    clickNodeChange(node) {
      //更改搜索状态
      this.stateSearch = false
      //关闭高级搜索弹框
      this.$refs.search.hiddenSearch()
      // 判断角色职级输入框是否为选中状态
      this.bool = true
      // 获取部门id和部门名字
      this.departmentId = node.id
      this.nodeName = node.name
      this.switchIndex = 0
      this.$set(this.searchData, 'departmentId', node.id)
      this.$store.state.CallAmount.departmentName = this.nodeName
      // 是否为检索状态
      if (!this.treeFlag) {
        this.$store.dispatch("CallAmount/getTreeList", this.departmentId)
        // 获取树形选中对应Tab菜单
        this.$store.dispatch("CallAmount/getTreeInformation", node.id)
      } else {
        // 获取树形选中对应Tab菜单
        this.$store.dispatch("CallAmount/getTreeInformation", node.id)
      }
      if (node.id === 1) {
        this.$set(this.searchData, 'departmentId', node.id)
        this.searchData.type = "0006"
        // 获取表格数据
        this.areaData(this.searchData, null)
        return
      }
      setTimeout(() => {
        // 拿到tab类型的code
        this.$set(this.searchData, 'type', this.classification[0].code)
        // 获取表格数据
        this.areaData(this.searchData, null)
      }, 800)
    },
    filterClickNode(data) {
    },
    /**
     * @author 王磊
     * @information 获取树的数据
     * @date 2019-1-19 14:43
     */
    loadChildrenData(node, resolve) {
      // 延时获取节点渲染数据
      setTimeout(() => {
        this.currentNode = node
        // 如果第一节点等级为0，则将获取的数据直接赋值给节点
        if (node.level === 0) {
          return resolve(this.callTreeList)
        }
        // 获取部门id，和部门类型code
        this.departmentId = node.data.id
        this.$set(this.searchData, 'type', node.data.departmenttype)
        this.$set(this.searchData, 'departmentId', node.data.id)
        this.$axios
          .get(`${request.treeUrl}v1/department/list?id=${this.departmentId}`)
          .then(res => {
            resolve(res.data.result ? res.data.result : [])
            this.getOrgChildListData = res.data.result // 复制一个子级数据，为后期树结构插入数据做准备
          })
      }, 500)
    },
    /**
     * @author 陈涛
     * @information 进去详情
     * @date 2019-1-15
     */
    entryDetails(dataInfo) {
      this.infoData = {...this.searchData}
      this.$set(this.infoData, 'field', dataInfo.name)
      this.$set(this.infoData, 'Id', dataInfo.row.regionId)
      this.$set(this.infoData, 'tableType', this.tableType)
      this.displayHiding = true
      // 获取选中的部门名字
      this.departmentName = dataInfo.row.department
      //获取选中的类型
      if(this.tableType === "region"){
        this.callType = dataInfo.field
      }else if(this.tableType === "people"){
        this.callType = `${dataInfo.row.userName}-${dataInfo.field}`
      }
      
    }
  },
  watch: {
    /**
     * @author 王磊
     * @information 部门树模糊搜索
     * @date 2019-1-20 9:18
     */
    searchTreeValue: function(value) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 如果字符串为空,就展示全部数据
        if (value){
          this.treeFlag = true
          // 模糊搜索请求
          let keyWord = value
          this.$store.dispatch("CallAmount/getSearchTreeList", keyWord)
        }else{
          this.treeFlag = false
        } 
      }, 1000)
    }
  }
}
</script>
